<script>
import { getProList } from '@/api/pro'
export default {
    name: 'proList',
    data() {
        return {
            proList: [],
            currentPage: 1,
            pageSize: 5,
            total: 0
        }
    },
    methods: {
        changeCurrent(value) {
            // console.log(value);
            this.currentPage = value
            getProList({
                count: this.currentPage,
                limitNum: this.pageSize
            }).then(res => {
                this.proList = res.data
                this.total = res.total
            })
        }
    },
    mounted() {
        getProList({
            count: this.currentPage,
            limitNum: this.pageSize
        }).then(res => {
            console.log(res);
            this.proList = res.data
            this.total = res.total
        })
    },
}
</script>
<template>
    <h2>商品列表</h2>


    <el-table :data="proList" style="width: 100%">
        <el-table-column type="index" label="序号" width="180">
            <template #default="{ row, column, $index }">
                <div>
                    {{ (this.currentPage - 1) * this.pageSize + $index + 1 }}
                </div>
            </template>
        </el-table-column>
        <el-table-column label="商品图片">
            <template #default="scope">
                <el-image style="width: 80px;height: 80px;" :src="scope.row.img1"></el-image>
            </template>
        </el-table-column>
        <el-table-column prop="proname" label="商品名称" />
        <el-table-column prop="category" label="分类" />
        <el-table-column prop="originprice" label="价格" />

    </el-table>

    <el-pagination @current-change="changeCurrent" :page-size="pageSize" v-model:current-page="currentPage" background
        layout="prev, pager, next" :total="total" />
</template>